{% extends "base.html" %}

{% block content %}
<div class="container-fluid">
    <!-- 欢迎卡片 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">
                        <i class="fas fa-tachometer-alt me-2"></i>系统概览
                    </h4>
                    <p class="card-text">欢迎使用AIOT智能污水管理平台，这里展示了污水处理设施的运行状态、水质指标和管网维护信息。</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态卡片 -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">管网设备</div>
                            <div class="h5 mb-0 font-weight-bold">{{ device_count|default(0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-project-diagram fa-2x text-primary"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">水质正常</div>
                            <div class="h5 mb-0 font-weight-bold">{{ (water_quality_normal_rate|default(0) * 100)|round|int }}%</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-tint fa-2x text-success"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">待处理维护</div>
                            <div class="h5 mb-0 font-weight-bold">{{ pending_maintenance|default(0) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-tools fa-2x text-warning"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info h-100">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">设备在线率</div>
                            <div class="h5 mb-0 font-weight-bold">{{ (device_online_rate|default(0) * 100)|round|int }}%</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-signal fa-2x text-info"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="row">
        <!-- 水质监测图表 -->
        <div class="col-xl-8 col-lg-7">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-area me-1"></i>
                    水质指标趋势
                </div>
                <div class="card-body">
                    <div id="waterQualityChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>

        <!-- 设备状态饼图 -->
        <div class="col-xl-4 col-lg-5">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-chart-pie me-1"></i>
                    管网设备状态
                </div>
                <div class="card-body">
                    <div id="deviceStatusChart" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近告警和维护记录 -->
    <div class="row">
        <!-- 最近告警 -->
        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-bell me-1"></i>
                    最近告警
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>设备</th>
                                    <th>告警类型</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for alert in recent_alerts|default([]) %}
                                <tr>
                                    <td>{{ alert.timestamp }}</td>
                                    <td>{{ alert.device_name }}</td>
                                    <td>{{ alert.type }}</td>
                                    <td>
                                        <span class="badge {% if alert.status == '未处理' %}bg-danger
                                            {% elif alert.status == '处理中' %}bg-warning
                                            {% else %}bg-success{% endif %}">
                                            {{ alert.status }}
                                        </span>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="4" class="text-center">暂无告警记录</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近维护记录 -->
        <div class="col-xl-6">
            <div class="card mb-4">
                <div class="card-header">
                    <i class="fas fa-history me-1"></i>
                    最近维护记录
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>管网</th>
                                    <th>维护类型</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for record in maintenance_records|default([]) %}
                                <tr>
                                    <td>{{ record.maintenance_date.strftime('%Y-%m-%d %H:%M') }}</td>
                                    <td>{{ record.pipe.name }}</td>
                                    <td>
                                        {% if record.maintenance_type == 'check' %}检查
                                        {% elif record.maintenance_type == 'repair' %}维修
                                        {% elif record.maintenance_type == 'replace' %}更换
                                        {% else %}{{ record.maintenance_type }}{% endif %}
                                    </td>
                                    <td>
                                        <span class="badge {% if record.status == 'completed' %}bg-success
                                            {% elif record.status == 'in_progress' %}bg-warning
                                            {% else %}bg-secondary{% endif %}">
                                            {% if record.status == 'completed' %}已完成
                                            {% elif record.status == 'in_progress' %}进行中
                                            {% else %}{{ record.status }}{% endif %}
                                        </span>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="4" class="text-center">暂无维护记录</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<!-- ECharts -->
<script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // 水质监测趋势图
    var waterQualityChart = echarts.init(document.getElementById('waterQualityChart'));
    var waterQualityOption = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['pH值', '浊度', '溶解氧']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: JSON.parse('{{ time_points|default([])|tojson|safe }}')
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: 'pH值',
                type: 'line',
                data: JSON.parse('{{ ph_data|default([])|tojson|safe }}'),
                smooth: true
            },
            {
                name: '浊度',
                type: 'line',
                data: JSON.parse('{{ turbidity_data|default([])|tojson|safe }}'),
                smooth: true
            },
            {
                name: '溶解氧',
                type: 'line',
                data: JSON.parse('{{ oxygen_data|default([])|tojson|safe }}'),
                smooth: true
            }
        ]
    };
    waterQualityChart.setOption(waterQualityOption);

    // 设备状态饼图
    var deviceStatusChart = echarts.init(document.getElementById('deviceStatusChart'));
    var deviceStatusOption = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: '设备状态',
                type: 'pie',
                radius: '50%',
                data: JSON.parse('{{ device_status_data|default([])|tojson|safe }}'),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    deviceStatusChart.setOption(deviceStatusOption);

    // 响应式调整
    window.addEventListener('resize', function() {
        waterQualityChart.resize();
        deviceStatusChart.resize();
    });
});
</script>
{% endblock %} 